<template>
    <div class="wrap">
        <div class="wrap-content">
            <instance-tree :treeData="instanceTree"
                           @currentNodeData="getCurrentInstanceAttributes"
                           class="instance-component"
                           width="100px">
            </instance-tree>
            <div class="card">
                <attribute-card
                    :is-assembly-prop="true"
                    :select-node-prop="currentSelectNode"></attribute-card>
            </div>
        </div>
    </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import AttributeList from './CmdDlgAttributeList.vue';
import {electricalCommand} from "../../../command/ElectricalCommand";
import InstanceTree from "../MaterialConsumeStatisticsTool/AssemblyDocMaterialSetting/InstanceTree.vue";
import AttributeCard from "./CmdDlgAttributeCard.vue";

export default {
    name: "CmdDlgElectricalInfoSetting",
    mixins: [DialogMixin],
    components: {AttributeCard, InstanceTree, AttributeList},
    data() {
        return {
          instanceTree: [],
          currentSelectNode: {},//当前选择节点对象的属性
          currentDocTypeFlag: true,//当前是装配还是零件 true-装配 false-零件
          curTab: "modelInformation",
          variableFiledNames: {

          }
        }
    },

    mounted() {
        electricalCommand.init(1200, 1200, 300, () => {
            electricalCommand.clearAllHighLight();
            //获取InstanceTree
            this.getInstanceTree();
        })
    },

    methods: {
        changePluginContainerHeight() {
            electricalCommand.changePluginContainerHeight({
                minWidth: this.$el.clientWidth,
                maxHeight: this.$el.clientHeight,
                width: 900
            })
        },
        getInstanceTree() {
            electricalCommand.getInstanceTree(res => {
                this.instanceTree = res;
            })
        },
        getCurrentInstanceAttributes(data) {
            if (data?.children.length === 0) {
                this.currentDocTypeFlag = false;
            } else {
                this.currentDocTypeFlag = true;
            }
            let nodeName = data.displayName;
            electricalCommand.getAttributesByInstanceNode({nodeName}, res => {
                if (res) {
                    this.currentSelectNode = res;
                }
            });
        },
        getInstallTypeEnum(val) {

        }
    },
}
</script>

<style scoped>
.wrap {
    font-size: 12px;
    height: 450px;
}

.wrap-content {
    color: var(--text-color1);
    font-size: var(--text-14);
    display: flex;
    flex-grow: 1;
    height: 100vh;
    max-height: 500px;
    max-width: 1200px;
}

.instance-component {
    width: 35%;
    height: 90%;
    border: 2px solid var(--bg-color3);
    padding: 8px;
    text-overflow: ellipsis;
    overflow-y: auto;
}

/*.list-component {*/
/*    border: 2px solid var(--bg-color3);*/
/*    padding: 8px;*/
/*    height: 100%;*/
/*}*/

/*.dialog-footer {*/
/*    margin-left: 15px;*/
/*}*/

.tableList {
    width: 100%;
    height: 20%;
}

.card {
    height: 90%;
    width: 65%;
    margin-left: 5px;
}

>>> .el-tree-node.is-current > .el-tree-node__content {
    background-color:#afd7ff;
}

>>> .el-tree-node__content:hover {
    background-color: #e4e7ed;
}

</style>